import { FC, useState } from "react";
import { Empty, Table, Tag, Button, Modal } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";

const { confirm } = Modal;

const list = [
  {
    _id: "q1",
    title: "问卷1",
    isPublished: true,
    isStar: true,
    answerCount: 3,
    createdAt: "3月01日 13:23",
  },
  {
    _id: "q4",
    title: "问卷3",
    isPublished: true,
    isStar: true,
    answerCount: 3,
    createdAt: "3月16日 13:23",
  },
  {
    _id: "q5",
    title: "问卷4",
    isPublished: false,
    isStar: true,
    answerCount: 3,
    createdAt: "3月17日 13:23",
  },
];

const Trash: FC = () => {
  const [questionList] = useState(list);

  const [selected, setSelected] = useState<string[]>([]);

  const columns = [
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      render(isPublished: boolean) {
        return isPublished ? <Tag color="green">已发布</Tag> : <Tag>未发布</Tag>;
      },
    },
    {
      title: "答卷",
      dataIndex: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
    },
  ];

  function delAll() {
    confirm({
      title: "提示",
      content: "删除后不可恢复",
      icon: <InfoCircleOutlined />,
      onOk() {
        console.log(selected);
      },
    });
  }

  function resave() {}

  const tableEl = (
    <>
      <div className="flex mb-4">
        <Button type="primary" disabled={selected.length === 0} className="mr-3" onClick={resave}>
          恢复
        </Button>
        <Button disabled={selected.length === 0} danger onClick={delAll}>
          彻底删除
        </Button>
      </div>
      <Table
        rowKey={"_id"}
        dataSource={questionList}
        columns={columns}
        pagination={false}
        rowSelection={{
          type: "checkbox",
          onChange(checkbox) {
            setSelected(checkbox as string[]);
          },
        }}
      ></Table>
    </>
  );

  return (
    <div>
      <div className="flex justify-between mb-5">
        <div className="text-xl font-bold">回收站</div>
        <div>搜索</div>
      </div>
      {questionList.length == 0 && <Empty />}
      {questionList.length > 0 && tableEl}
    </div>
  );
};

export default Trash;
